<template>
  <div>
    <base-input-text
      v-model.trim="newTodoText"
      @keydown.enter="addTodo"
    ></base-input-text>
    <ul  v-if="todos.length">
      <todo-list-item
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @remove="removeTodo"
      ></todo-list-item>
    </ul>
    <p v-else>
			Nothing left in the list. Add a new todo in the input above.
    </p>
  </div>
</template>

<script>
import TodoListItem from "./TodoListItem.vue";
import BaseInputText from "./BaseInputText.vue";
// import _concat from 'lodash/concat'
// let arr = [1,3,4]
// let other = _concat(arr,[1],[1,[1,3]])
// console.log(other); 结果为：(6) [1, 3, 4, 1, 1, Array(2)]
export default {
  components: {
    "todo-list-item": TodoListItem,
    "base-input-text": BaseInputText,
  },
  data() {
    return {
      newTodoText: "",
      todos: [
        {
          id: 1,
          text: "Learn Vue",
        },
        {
          id: 2,
          text: "Learn about single-file components",
        },
        {
          id: 3,
          text: "Fall in love",
        },
      ],
    };
  },
  methods: {
    addTodo() {
        //增之前要做什么操作
        //怎么赠
        //增完之后，有什么东西要还原
      if (this.newTodoText) {
        this.todos.push({
          id: this.todos.length ? this.todos[this.todos.length - 1].id + 1 : 1,
          text: this.newTodoText,
        });
        this.newTodoText = "";
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id !== id;
      });
    },
  },
};
</script>

<style>
ul{
    margin: auto;
    width: 300px;
    text-align: left;
    margin-top:5px;
}
</style>